<template>
  <div class="container">

    <IForm :formFrame="miniappFrame" title="小程序客服" class="form-container" :formData.sync="form"></IForm>

    <IForm :formFrame="appFrame" title="App端客服" class="form-container" :formData.sync="form"></IForm>

    <IForm :formFrame="webFrame" title="H5端客服" class="form-container" :formData.sync="form"></IForm>

    <div slot="action">
      <!-- <a-button class="btn" @click="cancel">取消</a-button> -->
      <a-button class="btn" type="primary" @click="submit">保存</a-button>
    </div>
    <!-- <AttrEditor :form.sync="form">
			<div slot="action">
				<a-button class="btn" @click="cancel">取消</a-button>
				<a-button class="btn" type="primary" @click="submit">提交</a-button>
			</div>
		</AttrEditor> -->

  </div>
</template>

<script>
  // import AttrEditor from "./components/AttrEditor"
  import IForm from "@/components/IForm"

  const resourceType = 'custom_service'

  export default {
    components: {
      IForm
      // AttrEditor
    },
    data() {
      return {
        uuid: '',
        form: {
          banner: []
        },
        categoryList: []
      }
    },
    computed: {
      categoryOptions() {
        return this.categoryList.map(item => {
          return {
            title: item.title,
            value: item.id
          }
        })
      },
      webFrame() {
        return [{
          title: 'H5端客服跳转',
          key: 'web_kf_link',
          type: 'link',
          placeholder: '',
          newline: true,
          required: true,
        }]
      },
      miniappFrame() {
        return [{
            title: '小程序客服跳转',
            key: 'miniapp_kf_type',
            type: 'radio',
            placeholder: '',
            tips: '不设置则默认使用小程序自带的客服系统',
            newline: true,
            required: true,
            options: [
              {
                title: '小程序客服',
                value: 'miniapp_kf'
              },
              {
                title: '使用微信客服',
                value: 'wx_custom_service'
              }
            ]
          },
          {
            title: '微信客服企业ID',
            key: 'miniapp_wx_corpid',
            type: 'input',
            tips: '请到 <a href="https://work.weixin.qq.com/kf/frame#/corpinfo" target="_blank">这里</a> 查看企业ID',
            placeholder: '格式如: wwc34db0a81f3ab675',
            newline: true,
            required: true,
            where: {
              miniapp_kf_type: 'wx_custom_service'
            }
          },
          {
            title: '客服链接',
            key: 'miniapp_wx_kf_link',
            type: 'input',
            tips: '请到 <a href="https://work.weixin.qq.com/kf/frame#/start/scene/3" target="_blank">这里</a> 查看客服链接',
            placeholder: '格式如: https://work.weixin.qq.com/kfid/kfca6f59509a175114e',
            newline: true,
            required: true,
            where: {
              miniapp_kf_type: 'wx_custom_service'
            }
          },
          {
            title: '跳转链接',
            key: 'miniapp_link',
            type: 'link',
            newline: true,
            required: true,
            tips: '点击客服按钮后跳转的页面',
            where: {
              miniapp_kf_type: 'link_other'
            }
          },
        ]
      },
      appFrame() {
        return [{
            title: 'App端客服跳转',
            key: 'app_kf_type',
            type: 'radio',
            placeholder: '',
            tips: '不设置此项，则用户在App端点击客服按钮时会提示“未设置客服”',
            newline: true,
            required: true,
            options: [{
                title: '使用微信客服',
                value: 'wx_custom_service'
              },
              {
                title: '点击跳转',
                value: 'link_other'
              }
            ]
          },
          {
            title: '微信客服企业ID',
            key: 'app_wx_corpid',
            type: 'input',
            tips: '请到 <a href="https://work.weixin.qq.com/kf/frame#/corpinfo" target="_blank">这里</a> 查看企业ID',
            placeholder: '格式如: wwc34db0a81f3ab675',
            newline: true,
            required: true,
            where: {
              app_kf_type: 'wx_custom_service'
            }
          },
          {
            title: '客服链接',
            key: 'app_wx_kf_link',
            type: 'input',
            tips: '请到 <a href="https://work.weixin.qq.com/kf/frame#/start/scene/3" target="_blank">这里</a> 查看客服链接',
            placeholder: '格式如: https://work.weixin.qq.com/kfid/kfca6f59509a175114e',
            newline: true,
            required: true,
            where: {
              app_kf_type: 'wx_custom_service'
            }
          },
          {
            title: '跳转链接',
            key: 'app_link',
            type: 'link',
            newline: true,
            required: true,
            tips: '点击客服按钮后跳转的页面',
            where: {
              app_kf_type: 'link_other'
            }
          },
        ]
      }
    },
    created() {
      this.$http.get(`/setting/sys/${resourceType}`).then(res => {
        this.form = res.data.setting || {}
      })
    },
    mounted() {},
    watch: {},
    methods: {
      cancel() {
        this.$router.back(-1)
      },
      submit() {
        this.$http.post(`/setting/sys/${resourceType}`, {
          setting: this.form
        }).then(res => {
          this.$message.success('保存成功')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form-container {
    padding-bottom: 30px;
    margin-bottom: 50px;
  }

  .container {
    .btn {
      margin-right: 30px;
    }
  }
</style>
